<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // async function async1() {
        //     console.log('async1 start') // 2
        //     await async2()
        //     console.log('async1 end') // 6
        // }
        // async function async2() {
        //     console.log('async2') // 3
        // }
        // console.log('script start') // 1
        // setTimeout(function () {
        //     console.log('setTimeout') // 8
        // }, 0)
        // async1();
        // new Promise(function (resolve) {
        //     console.log('promise1') // 4
        //     resolve();
        // }).then(function () {
        //     console.log('promise2') // 7
        // });
        // console.log('script end') // 5

        // script start / async1 start / promise1 / script end / async2 / async1 end / promise2 / setTimeout

        async function async1() {
            console.log('async1 start') // 2  
            await async2() // ==> await 这一行，这个async2 同步执行的。await的下面，放到微任务队列
            console.log('async1 end') // 这一行，相当于放到.then()中  微-1 
        }
        async function async2() {
            console.log('async2') // 3 
        }

        console.log('script start')  // 1 

        setTimeout(function () {
            console.log('setTimeout') // 放到宏任务队列中 宏1 
        }, 0)

        async1();

        new Promise(function (resolve) {
            console.log('promise1')
            resolve();
        }).then(function () {
            console.log('promise2')  // 微任务  微-2 
        });
        console.log('script end')


        // script start 
        // async1 start
        // async2
        // promise1
        // script end
        // async1 end
        // promise2  (本轮tick结束)
        // setTimeout

        // 宏任务和微任务的优先级 ==> 微任务的优先级高
        // ==> 在本轮事件循环中的微任务比下一次的事件循环中的宏任务优先级高

        // 我们可以把宏微任务的关系想象成 拔出萝卜带出泥 ， 宏任务就是泥，微任务就是萝卜上的泥
        // 每次拔完萝卜，都要把萝卜上的泥清理干净，再去拔下一个萝卜
    </script>
</body>

</html>